<template>
  <section class='f-index'>
    <img class="f-bg" src="@/assets/imgs/jhh_home_title_bg.png" alt="">

    <section class="f-title">
      <img class="f-title-img1" src="@/assets/icons/jhh_worktable_title_test.png" alt="">
      <van-badge :dot="dot">
        <img class="f-title-img2" src="@/assets/icons/jhh_worktable_message.png" alt="" @click="toMsg">
      </van-badge>
    </section>

    <section class="f-banner">
      <img class="f-img" src="@/assets/imgs/jhh_home_banner.png" alt="">
      <van-notice-bar class="f-notice-bar" left-icon="volume-o" color="#424242" background="#ffffff" :scrollable="false">
        <template #left-icon>
          <img class="f-notice-icon" src="@/assets/icons/jhh_worktable_notice.png" alt="">
        </template>
        <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
          <van-swipe-item v-for="item in msgList" :key="item.messageId">{{item.title}}</van-swipe-item>
        </van-swipe>
      </van-notice-bar>
    </section>

    <div class="f-label">资料类</div>
    <ul class="f-ul">
      <li class="f-li" @click="pageJump('uploadOrder')">
        <img class="li-img" src="@/assets/icons/jhh_worktable_date_upload.png" alt="">
        <div class="f-text">
          <p class="li-name">资料上传</p>
          <p class="li-desc">开卡订单信息上传</p>
        </div>
      </li>
      <li class="f-li" @click="pageJump('auditOrder')">
        <img class="li-img" src="@/assets/icons/jhh_worktable_date_audit.png" alt="">
        <div class="f-text">
          <p class="li-name">资料审核</p>
          <p class="li-desc">开卡订单转发/审核</p>
        </div>
      </li>
    </ul>

    <template v-if="!isTest">
      <div class="f-label">佣金类</div>
      <ul class="f-ul">
        <li class="f-li" @click="pageJump('incomeList')">
          <img class="li-img" src="@/assets/icons/jhh_worktable_brokerage_policy.png" alt="">
          <div class="f-text">
            <p class="li-name">佣金政策</p>
            <p class="li-desc">佣金政策管理</p>
          </div>
        </li>
        <!-- <li class="f-li">
        <img class="li-img" src="@/assets/icons/jhh_worktable_brokerage_order.png" alt="">
        <div class="f-text">
          <p class="li-name">佣金订单</p>
          <p class="li-desc">佣金发放订单查看</p>
        </div>
      </li>
      <li class="f-li">
        <img class="li-img" src="@/assets/icons/jhh_worktable_brokerage_mannage.png" alt="">
        <div class="f-text">
          <p class="li-name">佣金管理</p>
          <p class="li-desc">开卡订单佣金计算</p>
        </div>
      </li> -->
      </ul>
    </template>

    <div class="f-label">其它</div>
    <ul class="f-ul">
      <!-- <li class="f-li">
        <img class="li-img" src="@/assets/icons/jhh_worktable_activate_manage.png" alt="">
        <div class="f-text">
          <p class="li-name">激活管理</p>
          <p class="li-desc">商品激活信息维护</p>
        </div>
      </li> -->
      <li class="f-li" @click="pageJump('phoneActive')">
        <img class="li-img" src="@/assets/icons/jhh_worktable_activate_sim.png" alt="">
        <div class="f-text">
          <p class="li-name">号卡激活</p>
          <p class="li-desc">选择商品开卡链接</p>
        </div>
      </li>
      <li class="f-li" @click="pageJump('phoneRecharge')">
        <img class="li-img" src="@/assets/icons/jhh_worktable_phone_recharge.png" alt="">
        <div class="f-text">
          <p class="li-name">话费充值</p>
          <p class="li-desc">话费充值 官方授权</p>
        </div>
      </li>
      <li class="f-li" @click="getMySupplier()">
        <img class="li-img" src="@/assets/icons/jhh_worktable_service.png" alt="">
        <div class="f-text">
          <p class="li-name">在线客服</p>
          <p class="li-desc">有问题 咨询客服</p>
        </div>
      </li>
    </ul>

  </section>
</template>
<script>
import { ref, reactive, toRefs, onMounted, watch, getCurrentInstance, onBeforeUnmount } from 'vue';
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex';
import JsBridge from '@/utils/JsBridge.js'
import { warningDeal, getStore } from '@/utils/utils';
import api from './api'

export default {

  setup(props, context) {
    const store = useStore()

    const router = useRouter()
    const route = useRoute();

    const state = reactive({
      isTest: getStore('USER_INFO').phone == '15854106389',

      msgList: [],
      dot: false,
      timer: null
    })

    onMounted(() => {
      store.commit("setNavBar", { show: false })

      getNewMessageOrder()
      state.timer = setInterval(() => {
        getNewMessageOrder()
      }, 1000 * 60)
    })

    const getNewMessageOrder = () => {
      api.newMessageOrder({ size: 10 }).then(res => {
        state.msgList = res.data
        if (res.data.length) {
          state.dot = true
        } else {
          state.dot = false
        }
      })
    }

    const pageJump = (name) => {
      store.commit("removeCacheRoute", 'PhoneActive');
      store.commit("removeCacheRoute", 'PhoneRecharge');

      router.push({
        path: `/index/${name}`
      })
    }

    const toMsg = () => {
      router.push({
        path: `/msg`
      })
    }

    const getMySupplier = () => {
      let json = {
        "orderBy": "",
        "freezeStatus": "",
        "shieldStatus": "",
        "shopName": "",
        "page": 1,
        "size": 90
      }
      api.mySupplier(json).then(res => {
        let flagList = []
        res.data.records.forEach(item => {
          if (item.artificialFlag) {
            flagList.push(item)
          }
        })

        if (flagList.length > 1) {
          router.push({
            path: `/shop/supplier`
          })
        }
        if (flagList.length == 1) {
          router.push({
            path: '/shop/customer',
            query: {
              artificialKey: flagList[0].artificialKey
            }
          })
        }
        if (flagList.length < 1) {
          warningDeal('暂无人工客服！')
        }
      })
    }

    onBeforeUnmount(() => {
      clearInterval(state.timer)
    })

    return {
      ...toRefs(state),
      pageJump,
      toMsg,
      getMySupplier,
    }
  }
}
</script>
<style lang='scss' scoped>
.f-index {
  padding: 0 16px;
  position: relative;
  .f-bg {
    position: absolute;
    top: 0px;
    left: 0;
    width: 375px;
    background-size: 100%;
  }
  .f-title {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
    .f-title-img1 {
      width: 164px;
      height: 16px;
    }
    .f-title-img2 {
      width: 21px;
      height: 16px;
    }
  }
  .f-banner {
    position: relative;
    width: 344px;
    height: 173px;
    background: #ffffff;
    border-radius: 15px;
    margin-bottom: 10px;
    .f-img {
      width: 344px;
      height: 133px;
      background: #e1f4ff;
      border-radius: 10px;
    }
    .f-notice-bar {
      font-size: 10px;
    }
    .f-notice-icon {
      width: 18px;
      height: 15px;
      margin-right: 8px;
    }
  }
  .f-label {
    font-size: 14px;
    display: flex;
    align-items: center;
    margin: 5px 0 7px 0;
  }
  .f-label::before {
    content: "";
    margin-right: 10px;
    width: 4px;
    height: 19px;
    background: #3273f4;
  }
  .f-ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    .f-li {
      display: flex;
      align-items: center;
      width: 164px;
      height: 73px;
      background: #ffffff;
      border-radius: 10px;
      margin-bottom: 10px;
      padding-left: 18px;
      .li-img {
        width: 37px;
        height: 37px;
      }
      .f-text {
        margin-left: 7px;
      }
      .li-name {
        font-size: 16px;
        font-weight: 500;
      }
      .li-desc {
        font-size: 10px;
        color: #666666;
        margin-top: 7px;
      }
    }
  }
  .notice-swipe {
    height: 40px;
    line-height: 40px;
  }
}
</style>